<template>
    <div class="page-setting">
        <Header title="商品积分兑换"></Header>
		<div class="whole">
			<div style="width: 50%;padding: 2px; height: 180px;">
			<img src="http://api.guojintz.com/jifen/jf01.jpg" alt="">
			<div class="grid-a">
				<div class="grid-title">
					<div class="grid-title-titl">
						<p style="font-size: 16px;">天然蜂蜜</p>
						<p style="font-size: 14px;">兑换:500积分</p>
					</div>
				</div>
				<div class="grid-title">
					  <mu-button class="demo-button" color="primary" @click="confirm()">
						  <mu-icon value="shopping_cart" :size="48"></mu-icon>
					  </mu-button>
				</div>
			</div>
			</div>
			<div style="width: 50%;padding: 2px; height: 180px;">
			<img src="http://api.guojintz.com/jifen/jf02.jpg" alt="">
			<div class="grid-b">
				<div class="grid-title">
					<div class="grid-title-titl">
						<p style="font-size: 16px;">家庭日用</p>
						<p style="font-size: 14px;">兑换:200积分</p>
					</div>
				</div>
				<div class="grid-title">
					  <mu-button class="demo-button" color="primary" @click="confirm()">
						  <mu-icon value="shopping_cart" :size="48"></mu-icon>
					  </mu-button>
				</div>
			</div>
			</div>
			<div style="width: 50%;padding: 2px; height: 180px;">
			<img src="http://api.guojintz.com/jifen/jf03.jpg" alt="">
			<div class="grid">
				<div class="grid-title">
					<div class="grid-title-titl">
						<p style="font-size: 16px;">话费</p>
						<p style="font-size: 14px;">兑换:350积分</p>
					</div>
				</div>
				  <mu-button class="demo-button" color="primary" @click="confirm()">
					  <mu-icon value="shopping_cart" :size="48"></mu-icon>
				  </mu-button>
			</div>
			</div>
			<div style="width: 50%;height: 180px; padding: 2px;">
			<img src="http://api.guojintz.com/jifen/jf04.jpg" alt="">
			<div class="grid">
				<div class="grid-title">
					<div class="grid-title-titl">
						<p style="font-size: 16px;">电饭煲</p>
						<p style="font-size: 14px;">兑换:1000积分</p>
					</div>
				</div>
				  <mu-button class="demo-button" color="primary" @click="confirm()">
					  <mu-icon value="shopping_cart" :size="48"></mu-icon>
				  </mu-button>
			</div>
			</div>
			<div class="duihuan">兑换产品,由贵州国金有限公司赞助</div>
		</div>
    </div>
</template>

<script>
    // 引入头部组件
    import Header from "@c/Header";
    // 暴露接口
    export default {
        components: { Header },
		methods:{
			 confirm () {
			      this.$confirm('抱歉！您当前积分为0分,请邀请好友来获得积分', '提示', {
			        type: 'info'
			      }).then(({ result }) => {
			        if (result) {
						this.$router.push('/invite');
			        } else {

			        }
			      });
			    },
		}
    }
</script>

<style>
	.whole{
		position: relative;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;	
		
	}
    .duihuan{
	/* height: 68px; */
	color: rgba(0,0,0,.54);
	font-size: 14px;
    line-height: 48px;
	width: 100%;
	padding-top: 10px;
	text-align: center;
    }
	img{
	    height: 100%;
	    /* -webkit-transform: translateX(-50%); */
	    transform: translateX(-50%);
	    position: relative;
	    left: 50%;
	}
	.grid{
		height: 68px;
		width: 179px;
		line-height: 34px;
		position: absolute;
		bottom: 60px;
	    background-color: rgba(0,0,0,0.15);
		display: flex;
		box-align: center;
	}
	.grid-a,.grid-b{
		line-height: 34px;
		height: 68px;
		width: 179px;
		position: absolute;
		bottom: 240px;
		background-color: rgba(0,0,0,0.35);
		display: flex;
		box-align: center;
	}
	.grid-title{
	    /* margin-left: 16px; */
	    color: #fff;
	    text-align: left;
	}
	.demo-button{
		float: right;
		margin-top: 10px;
		background-color: transparent;
	}
</style>